<template>
  <el-dialog v-el-drag-dialog title="通知公告" :visible.sync="visible" :append-to-body="false" fullscreen :before-close="onClose">
    <el-form ref="dialogForm" :model="form" :rules="rules" label-width="120px" :disabled="readOnly">
      <el-card class="m-b-10">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio-button label="2" :disabled="lock && form.type === '3'">系统消息</el-radio-button>
            <el-radio-button label="3" :disabled="lock && form.type === '2'">通知公告</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <tinymce-editor v-if="form.type === '2'" ref="tinymce" v-model="form.content" :height="350" @close="onClose" />
          <el-input v-else
                    v-model="form.content"
                    type="textarea"
                    :rows="3"
          />
        </el-form-item>
        <el-form-item label="路由地址" prop="path">
          <el-input v-model="form.router" />
        </el-form-item>
        <el-form-item label="参数" prop="query">
          <el-input v-model="form.query" />
        </el-form-item>
        <el-form-item label="截止时间" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-card>
      <el-card v-if="form.type === '2'" class="m-b-10">
        <template slot="header">
          <span>指定接收者</span>
          <el-button type="primary" class="fr" style="margin-top: -10px" icon="el-icon-search" :disabled="readOnly" @click="selectUser">选 择</el-button>
        </template>
        <el-tag
          v-for="(item, index) in form.receiver_show"
          :key="'user_name_' + index"
          effect="plain"
          style="margin-right:5px;"
        >
          {{ item }}
        </el-tag>
      </el-card>
      <el-card v-if="form.type === '2'" class="m-b-10">
        <template slot="header">
          <span>指定接收角色</span>
          <el-button type="primary" class="fr" style="margin-top: -10px" icon="el-icon-search" :disabled="readOnly" @click="selectRole">选 择</el-button>
        </template>
        <el-tag
          v-for="(item, index) in form.receiverRole_show"
          :key="'role_name_' + index"
          effect="plain"
          style="margin-right:5px;"
        >
          {{ item }}
        </el-tag>
      </el-card>
    </el-form>

    <user-select-dialog v-if="openUserDialog" ref="userDialog" :single="false" @confirmDialog="setUser" />
    <role-tree-dialog v-if="openRoleDialog" ref="roleDialog" :single="false" @confirmDialog="setRole" />

    <span slot="footer" class="dialog-footer">
      <el-button v-if="!readOnly" type="primary" icon="el-icon-check" @click="onSubmit">保 存</el-button>
      <el-button icon="el-icon-close" @click="onClose">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { messageLoad, messageSave } from '@/api/tool/message'
import UserSelectDialog from '@/views/system/user/table/selectDialog'
import RoleTreeDialog from '@/views/system/role/tree/dialog'

export default {
  name: 'NoticeEdit',
  components: {
    UserSelectDialog,
    RoleTreeDialog
  },
  data() {
    return {
      visible: false,
      readOnly: false,
      lock: false,
      form: {
        id: undefined,
        type: '2',
        title: undefined,
        content: undefined,
        router: undefined,
        query: undefined,
        receiver: undefined,
        receiver_show: '',
        receiverRole: undefined,
        receiverRole_show: '',
        endTime: ''
      },
      rules: {},
      openUserDialog: false,
      openRoleDialog: false
    }
  },
  methods: {
    init(messageId, type, readOnly) {
      this.visible = true
      this.lock = false
      this.form.id = messageId || null
      this.form.type = type || '2'
      if (readOnly) {
        this.readOnly = readOnly
      }
      this.$nextTick(() => {
        this.loadForm(messageId)
      })
    },
    loadForm(id) {
      messageLoad({ 'id': id }).then(response => {
        if (response.param.id) {
          this.$api.objectUpdate(this.form, response.param)
          if (this.form.type === '2') {
            // 加载tinymce插件
            this.$refs.tinymce.update('')
            this.$refs.tinymce.update(this.form.content)
          }
        }
        this.lock = true
      })
    },
    selectUser() {
      this.openUserDialog = true
      const selected = this.form.receiver
      this.$nextTick(() => {
        this.$refs.userDialog.init()
        if (selected) {
          this.$refs.userDialog.initSelectedData(selected)
        }
      })
    },
    setUser(selection) {
      this.form.receiver = selection.map(node => node.userId).join(',')
      this.form.receiver_show = selection.map(node => node.userName)
    },
    selectRole() {
      this.openRoleDialog = true
      const selected = this.form.receiverRole
      this.$nextTick(() => {
        this.$refs.roleDialog.init(selected)
      })
    },
    setRole(nodes) {
      this.form.receiverRole = nodes.map(node => node.id).join(',')
      this.form.receiverRole_show = nodes.map(node => node.title)
    },
    onSubmit() {
      if (this.form.type === '3') {
        this.form.receiver = undefined
        this.form.receiver_show = ''
        this.form.receiverRole = undefined
        this.form.receiverRole_show = ''
      }

      messageSave(this.form).then(response => {
        this.$modal.msgSuccess(response.msg)
        this.$emit('confirmForm')
        this.onClose()
      }).catch(() => {})
    },
    onClose() {
      if (this.form.type === '2') {
        this.$refs.tinymce.update('')
      }
      this.$refs.dialogForm.resetFields()
      this.readOnly = false
      this.visible = false
    }
  }
}
</script>
